<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./output.css">
</head>

<body>
    <div class="container">
        <h2>w-*</h2>
        <div class="flex justify-center">
            <div class="space-y-4 font-mono font-bold text-xs text-center text-white">
                <div class="px-4 py-2 bg-blue-500 rounded-lg shadow-lg w-96 hidden sm:block">w-96</div>
                <div class="px-4 py-2 bg-blue-500 rounded-lg shadow-lg w-80 hidden sm:block">w-80</div>
                <div class="px-4 py-2 bg-blue-500 rounded-lg shadow-lg w-64 hidden sm:block">w-64</div>
                <div class="px-4 py-2 bg-blue-500 rounded-lg shadow-lg w-48">w-48</div>
                <div class="px-4 py-2 bg-blue-500 rounded-lg shadow-lg w-40">w-40</div>
                <div class="px-4 py-2 bg-blue-500 rounded-lg shadow-lg w-32">w-32</div>
                <div class="px-4 py-2 bg-blue-500 rounded-lg shadow-lg w-24">w-24</div>
            </div>
        </div>
        <h2>w-%</h2>
        <div class="relative rounded-xl overflow-auto p-8">
            <div class="space-y-4 font-mono font-bold text-xs text-white">
                <div class="flex space-x-4">
                    <div class="w-1/2 px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-1/2</div>
                    <div class="w-1/2 px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-1/2</div>
                </div>
                <div class="flex space-x-4">
                    <div class="w-2/5 px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-2/5</div>
                    <div class="w-3/5 px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-3/5</div>
                </div>
                <div class="flex space-x-4">
                    <div class="w-1/3 px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-1/3</div>
                    <div class="w-2/3 px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-2/3</div>
                </div>
                <div class="space-x-4 hidden sm:flex">
                    <div class="w-1/4 px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-1/4</div>
                    <div class="w-3/4 px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-3/4</div>
                </div>
                <div class="space-x-4 hidden sm:flex">
                    <div class="w-1/5 px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-1/5</div>
                    <div class="w-4/5 px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-4/5</div>
                </div>
                <div class="space-x-4 hidden sm:flex">
                    <div class="w-1/6 px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-1/6</div>
                    <div class="w-5/6 px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-5/6</div>
                </div>
                <div class="w-full px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center text-white font-mono">w-full
                </div>
            </div>
        </div>

        <h2>h-*</h2>
        <div class="relative rounded-xl overflow-auto p-8">
            <div class="flex justify-center items-end space-x-4 font-mono font-bold text-xs text-center text-white">
                <div class="w-8 bg-blue-500 rounded-lg shadow-lg h-96 relative">
                    <div class="absolute w-8 bottom-6">
                        <div class="-rotate-90">h-96</div>
                    </div>
                </div>
                <div class="w-8 bg-blue-500 rounded-lg shadow-lg h-80 relative">
                    <div class="absolute w-8 bottom-6">
                        <div class="-rotate-90">h-80</div>
                    </div>
                </div>
                <div class="w-8 bg-blue-500 rounded-lg shadow-lg h-64 relative">
                    <div class="absolute w-8 bottom-6">
                        <div class="-rotate-90">h-64</div>
                    </div>
                </div>
                <div class="w-8 bg-blue-500 rounded-lg shadow-lg h-48 relative">
                    <div class="absolute w-8 bottom-6">
                        <div class="-rotate-90">h-48</div>
                    </div>
                </div>
                <div class="w-8 bg-blue-500 rounded-lg shadow-lg h-40 relative">
                    <div class="absolute w-8 bottom-6">
                        <div class="-rotate-90">h-40</div>
                    </div>
                </div>
                <div class="w-8 bg-blue-500 rounded-lg shadow-lg h-32 relative">
                    <div class="absolute w-8 bottom-6">
                        <div class="-rotate-90">h-32</div>
                    </div>
                </div>
                <div class="w-8 bg-blue-500 rounded-lg shadow-lg h-24 relative">
                    <div class="absolute w-8 bottom-6">
                        <div class="-rotate-90">h-24</div>
                    </div>
                </div>
            </div>
        </div>

        <h2>h-%</h2>


        <h2>size-*</h2>
        <div class="relative rounded-xl overflow-auto p-8">
            <div class="grid grid-flow-col justify-center gap-4 font-mono font-bold text-xs text-center text-white">
                <div class="grid items-center justify-center bg-blue-500 rounded-lg shadow-lg size-16">size-16</div>
                <div class="grid items-center justify-center bg-blue-500 rounded-lg shadow-lg size-20">size-20</div>
                <div class="items-center justify-center bg-blue-500 rounded-lg shadow-lg size-24 grid">size-24</div>
                <div class="items-center justify-center bg-blue-500 rounded-lg shadow-lg size-32 hidden sm:grid">size-32
                </div>
                <div class="items-center justify-center bg-blue-500 rounded-lg shadow-lg size-40 hidden md:grid">size-40
                </div>
            </div>
        </div>

    </div>
    <div class="container">

    </div>


</body>

</html>